﻿<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="UTF-8">
	<title>易景三维场景模拟导航|室内三维可视化引擎|ESmap</title>
	<meta name="keywords" content="易景三维场景模拟导航,室内三维场景,三维场景引擎,三维场景制作,室内定位,易景三维场景,ESMap" />
	<meta name="description"
		content="易景三维场景第三人称导航,易景室内三维可视化引擎提供三维场景浏览、缩放、旋转、图层显隐等基础功能，支持自定义室内三维场景显示风格及样式，可自动绘制楼层热力图、散点图等专题三维场景，快速进行空间大数据分析展示。支持跨楼层精准的点到点之间的最短、最优路径计算，支持对路径结果进行导航和动画,并提供丰富的三维场景主题资源供二次开发调用。" />
	<link href="css/common.css" rel="stylesheet">
</head>
<style type="text/css">
	#pannel {
		position: absolute;
		left: 2%;
		bottom: 10%;
		z-index: 999;
	}

	button,
	input[type="button"] {
		padding: 7px 11px;
		background-color: #fff;
		border: none;
		cursor: pointer;
		border-radius: 3px;
	}

	#description {
		position: absolute;
		left: 50%;
		top: 86px;
		padding: 10px 25px;
		background: rgba(255, 255, 255, 255);
		border-radius: 4px;
		margin-left: -140px;
		opacity: 0.7;
	}

	#tool-tip {
		position: absolute;
		color: #fff;
		font-size: 18px;
		height: 25px;
		line-height: 25px;
		padding: 0 5px;
		z-index: 2;
		pointer-events: none;
		background-color: rgba(0, 0, 0, 0.3);
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		display: none;
	}

	.container-fluid h1 {
		text-align: center;
	}
</style>

<body ms-controller="ctrl" class="ms-controller">
	<span id="tool-tip"> </span>
	<div id="map-container"></div>
	<nav class="navbar navbar-inverse">
		<div class="container-fluid">
			<h1>易景室内三维可视化引擎 (模拟导航)</h1>

			<div class="tips-right">
				<span class="tip1"></span>
				<a class="tip2" onclick="tipClick('/api/senior/pathNavigation/')"></a>
			</div>
			<div class="tips-msg">
				<div class="msg msg1">
					<div class="erweima"></div>
					<p>手机扫一扫进入体验</p>
				</div>
				<div class="msg msg2">
					<h4>模拟导航</h4>
					<p>1. 用于车辆/行人导航，自动计算路程和所剩时间</p>
					<p>2. new esmap.ESNavigation({...}) 创建导航对象</p>

					<div style="display: none">
						易景三维场景第三人称导航,易景室内三维可视化引擎提供三维场景浏览、缩放、旋转、图层显隐等基础功能，支持自定义室内三维场景显示风格及样式，可自动绘制楼层热力图、散点图等专题三维场景，快速进行空间大数据分析展示。支持跨楼层精准的点到点之间的最短、最优路径计算，支持对路径结果进行导航和动画,并提供丰富的三维场景主题资源供二次开发调用。
					</div>
				</div>
			</div>
		</div>
	</nav>
	<div id="description">
		暂无导航提示信息
	</div>
	<div id="pannel">
		<input type="button" class="btn btn-default btnclass" onclick="clearNavi()" value="清除" />
		<input type="button" class="btn btn-default btnclass" onclick="startNavi1()" value="开始第一人称导航" />
		<input type="button" class="btn btn-default btnclass" onclick="startNavi2()" value="开始第三人称导航" />
  </div>
		<script src="../lib/config.js"></script>
		<script src="../lib/esmap-3.0.min.js"></script>
		<script src="../lib/jquery-2.1.4.min.js"></script>
		<script src="../lib/jquery.qrcode.min.js"></script>
		<script src="../lib/tips_controls.js"></script>
		<script type="text/javascript">
			//定义全局map变量
    var map;
    var esmapID = getQueryString('id') || defaultOpt.mapID;
    // 导航对象
    var navi;
    // 点击计数
    var clickCount = 0;
    var floorControl;
    var mapCoord = null;
    var building;
    $(function () {
      if (navi) {
        navi.stop();
        navi = null;
      }
      // 楼层控制控件配置参数
      var ctlOpt = new esmap.ESControlOptions({
        position: esmap.ESControlPositon.RIGHT_TOP,
        imgURL: 'image/wedgets/'
        // allLayer: true
        // size:"normal"
      })
      // 放大、缩小控件配置
      var ctlOpt1 = new esmap.ESControlOptions({
        position: esmap.ESControlPositon.LEFT_TOP, // 位置 左上角
        // 位置x,y的偏移量
        offset: {
          x: 20,
          y: 70
        },
        imgURL: 'image/wedgets/'
      })
			var container = document.getElementById('map-container');
      map = new esmap.ESMap({
        mode: esmap.MapMode.Building,
        container:container, // 渲染dom
        mapDataSrc: '../data', //三维场景数据位置
        mapAudioSrc: '../lib',        //导航语音位置,导航的必须配置
	      token:'escope',
        focusAlphaMode: false
      });

      map.openMapById(esmapID);
      map.showCompass = true; //显示指南针 
      //三维场景加载完成回调
      map.on('loadComplete', function () {
        building = map.getBuilding();
        floorControl = new esmap.ESScrollFloorsControl(map, ctlOpt);
        // var zoomControl = new esmap.ESZoomControl(map, ctlOpt1);
        createNavi();
      });
      //判断起点是否是同一处坐标
      var lastCoord = null;
      var curfnum = null;
      var h = 1;
      //点击三维场景事件。开始选点开始后，点击三维场景一次为起点，第二次点击为终点
      map.on('mapClickNode', function (event) {
        if (event.nodeType == 4) {
          curfnum = event.floor;
          h = 1;
          mapCoord = event.hitCoord;
        }
        if (event.nodeType == 5) {
          curfnum = event.FloorNum;
          h = event.RoomHigh;
          mapCoord = event.hitCoord;
        }
      })
      //为模型填充div添加点击事件
      container.onclick = function () {
        var fnum = curfnum;
        fnum&&mapCoord&&show(fnum, mapCoord);
      };
      container.ontouchend = function(){
        var fnum = curfnum;
        fnum&&mapCoord&&show(fnum, mapCoord);
      }
      
      show = function (fnum, coord) {
        if (!navi) return;
        if (coord != null) {
          //第三次点击清除路径，重现设置起点起点
          if (clickCount == 2) {
            navi.clearAll();
            clickCount = 0;
            lastCoord = null;
          }

          //第一次点击添加起点
          if (clickCount == 0) {
            lastCoord = coord;
            navi.setStartPoint({
              x: coord.x,
              y: coord.y,
              fnum: fnum,
              height: h,
              url: 'image/start.png',
              size: 64,
              showLevel: 23  //配置起点图标缩放等级,一直显示(默认)
            });
          } else if (clickCount == 1) { //添加终点并画路线
            //判断起点和终点是否相同
            if (lastCoord.x == coord.x) {
              alert("起点和终点不能相同!,请重新选点")
              return;
            }
            navi.setEndPoint({
              x: coord.x,
              y: coord.y,
              fnum: fnum,
              height: h,
              url: 'image/end.png',
              size: 64,
              showLevel:23 //配置终点图标缩放等级,一直显示(默认)
            });
            navi.getRouteResult({
              drawRoute: true,
            })
          }
          clickCount++;
        }
        curfnum = null;
      };
    });
   
    function createNavi() {
      if (building.naviData.length == 0) {
        console.warn("三维场景导航数据信息不存在！");
        return;
      }
      if (!navi) {
        //初始化导航对象
        navi = new esmap.ESNavigation({
          map: map,
          locationMarkerUrl: 'image/pointer.png',
          locationMarkerSize: 150,
          speed: 2,
          followAngle: true,
          followPosition: true,
          followGap: 3,
          tiltAngle: 30,
          audioPlay: true,
          // scaleLevel:0,
          mode: 1,
          offsetHeight: 2,
          maxEnd:1,   //离终点1米时候就结束导航
          // 设置导航线的样式
          lineStyle: {
            color: '#58a2e4',
            //设置线为导航线样式
            lineType: esmap.ESLineType.ESARROW,
            // lineType: esmap.ESLineType.FULL,
            lineWidth: 6,
            fixedWidth:true,
            offsetHeight: 0.3,
            smooth: true,
            seeThrough: false,
            noAnimate: true
            // 设置边线的颜色   
            // godEdgeColor: '#920000',
            // 设置箭头颜色
            // godArrowColor: "#ffffff"
          },
          scaleAnimate: true,
          showMultiFloor: false // 第三人称导航时展示多楼层生效 2024-04-18新增加参数
        });
      }
    navi.once('success',function(){
        navi.followAngle = true;
        navi.followPosition = true;
        navi.scaleAnimate = true;
        //语音播报
        map.ESAudioTool.playSoundByName('startNaving');
        navi.simulate();
    })
      navi.on('naviTip',function(message){
            $('#description').html(message)
      })
      navi.on("complete", function () {
        console.log("停止");
        document.getElementById('description').innerText = "到达终点";
      })
    }

    function clearNavi() {
      if (navi)
        navi.clearAll();
      clickCount = 0;
      document.getElementById("description").innerText = "暂无导航提示信息";
    }

    function startNavi1() {
      if(navi.isSimulating){
        navi.stop();
        navi.reset();
      }

      navi.once('success',function(){
        navi.followAngle = true;
        navi.followPosition = true;
        navi.scaleAnimate = true;
        //语音播报
        map.ESAudioTool.playSoundByName('startNaving');
        navi.simulate();
      })
    }
    function startNavi2() {
      if(navi.isSimulating){
        navi.stop();
        navi.reset();
      }
      navi.once('success',function(){
        navi.followAngle = false;
     navi.followPosition = false;
     navi.scaleAnimate = false;
     //语音播报
     map.ESAudioTool.playSoundByName('startNaving');
     navi.simulate();
      })

    }
		</script>
</body>

</html>